<!DOCTYPE html>
<html>
<head>
<title>Symmetrical Top Precession</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        background-color: #ffffff;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.fillStyle = 'black';
    
    // Origin and lengths
    const originX = 250;
    const originY = 300;
    const axisLength = 130;
    // Angle theta, chosen to match the diagram's appearance
    const theta = Math.PI / 4.5; // Approximately 40 degrees

    // Helper function to draw an axis line with an arrowhead
    function drawAxis(ctx, fromX, fromY, toX, toY) {
        const headLength = 12;
        const angle = Math.atan2(toY - fromY, toX - fromX);
        
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Helper function to draw a curved arrow for rotation
    function drawCurvedArrow(ctx, cx, cy, radiusX, radiusY, rotation, startAngle, endAngle) {
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(rotation);
        
        ctx.beginPath();
        ctx.ellipse(0, 0, radiusX, radiusY, 0, startAngle, endAngle);
        ctx.stroke();

        // Arrowhead at the end of the arc
        const headLength = 8;
        const ex = radiusX * Math.cos(endAngle);
        const ey = radiusY * Math.sin(endAngle);
        
        // Tangent angle at the end of the ellipse arc
        const tangentAngle = Math.atan2(radiusY * Math.cos(endAngle), -radiusX * Math.sin(endAngle));
        
        ctx.beginPath();
        ctx.moveTo(ex, ey);
        ctx.lineTo(ex - headLength * Math.cos(tangentAngle - Math.PI / 4), ey - headLength * Math.sin(tangentAngle - Math.PI / 4));
        ctx.moveTo(ex, ey);
        ctx.lineTo(ex - headLength * Math.cos(tangentAngle + Math.PI / 4), ey - headLength * Math.sin(tangentAngle + Math.PI / 4));
        ctx.stroke();
        
        ctx.restore();
    }
    
    // Set font for labels
    ctx.font = 'italic 22px Times New Roman';

    // Draw origin label
    ctx.fillText('O', originX - 25, originY + 15);

    // Draw z-axis
    drawAxis(ctx, originX, originY, originX, originY - axisLength - 20);
    ctx.fillText('z', originX + 10, originY - axisLength - 20);

    // Draw x-axis
    drawAxis(ctx, originX, originY, originX + axisLength + 20, originY);
    ctx.fillText('x', originX + axisLength + 25, originY + 8);

    // Draw z'-axis
    const zPrimeX = originX + axisLength * Math.sin(theta);
    const zPrimeY = originY - axisLength * Math.cos(theta);
    drawAxis(ctx, originX, originY, zPrimeX, zPrimeY);
    ctx.fillText("z'", zPrimeX + 5, zPrimeY - 5);

    // Draw x'-axis
    const xPrimeX = originX + (axisLength) * Math.cos(theta);
    const xPrimeY = originY + (axisLength) * Math.sin(theta);
    drawAxis(ctx, originX, originY, xPrimeX, xPrimeY);
    ctx.fillText("x'", xPrimeX - 10, xPrimeY + 25);

    // Draw angle theta
    ctx.beginPath();
    ctx.arc(originX, originY, 40, -Math.PI / 2, -Math.PI / 2 + theta);
    ctx.stroke();
    const thetaLabelX = originX + 55 * Math.cos(-Math.PI / 2 + theta / 2);
    const thetaLabelY = originY + 55 * Math.sin(-Math.PI / 2 + theta / 2);
    ctx.fillText('\u03B8', thetaLabelX - 10, thetaLabelY + 10); // θ

    // --- Draw Angular Velocities ---
    const arcStart = 0.75 * Math.PI;
    const arcEnd = 1.75 * Math.PI;

    // Draw angular velocity Omega (Ω) around z-axis
    const omegaZ_Y_offset = 100;
    drawCurvedArrow(ctx, originX, originY - omegaZ_Y_offset, 25, 10, 0, arcStart, arcEnd);
    ctx.fillText('\u03A9', originX - 55, originY - omegaZ_Y_offset + 10); // Ω

    // Draw angular velocity omega' (ω') around z'-axis
    const omegaPrime_dist = 85;
    const omegaPrime_centerX = originX + omegaPrime_dist * Math.sin(theta);
    const omegaPrime_centerY = originY - omegaPrime_dist * Math.cos(theta);
    drawCurvedArrow(ctx, omegaPrime_centerX, omegaPrime_centerY, 25, 10, theta, arcStart, arcEnd);
    
    // Position label for ω' manually in world coordinates
    const omegaPrimeLabelX = omegaPrime_centerX + 45 * Math.cos(theta - Math.PI / 2);
    const omegaPrimeLabelY = omegaPrime_centerY + 45 * Math.sin(theta - Math.PI / 2);
    ctx.fillText("\u03C9'", omegaPrimeLabelX + 5, omegaPrimeLabelY + 10); // ω'

    // Draw Figure caption
    ctx.font = 'bold 16px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 1.193.', canvas.width / 2, 480);

</script>
</body>
</html>